<template>
	<view>
		<u-popup :show="show" :round="10" mode="bottom" :safeAreaInsetBottom="true" @closeOnClickOverlay="true"
			@close="close">
			<view class="popup-view" style="width: 100%;">
				<view class="user-box flex">
					<view class="head-box">
						<u-avatar src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" size="48"></u-avatar>
					</view>
					<view class="user-info flex p-l-20">
						<view class="l-box grey">
							<view class="name m-b-20">徐海亮</view>
							<view class="num">XFS2309111</view>
						</view>
						<view class="r-box flex"  v-if="isActive">
							<!-- <view class="share m-r-20">
					</view> -->
							<view class="trash">
								<clIcon type="icon-shanchu" @click="delectDatalist()" color="#fff" size="20">
								</clIcon>
							</view>
						</view>
					</view>
				</view>
				<view class="cancel-btn" @click="close">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
	components: {
		clIcon,
	},
	name: "",
	props: {
		// 页面数据
		id: {
			type: String || null || undefined,
			default: "",
		},
		show: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {
			isActive: null
		};
	},
	watch: {
		// 是否打开picker
		id: {
			handler(newValue, oldValue) {
				this.isActive = newValue;
			},
			immediate: true,
		},
	},
	methods: {
		delectDatalist() {
			this.$emit("delectDatalist");
		},
		close() {
			this.$emit("close");
		}
	},
};
</script>

<style lang="scss" scoped>
.popup-view {
	padding-top: 30rpx;
}

.user-box {
	background: #f4f4f4;
	padding: 20rpx 40rpx;
	align-items: center;

	.user-info {
		flex: 1;

		.l-box {
			flex: 1;
		}

		.r-box {
			.share {
				background: #5ac725;
				width: 90rpx;
				height: 90rpx;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.trash {
				width: 90rpx;
				height: 90rpx;
				background: #f56c6c;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.cancel-btn {
	height: 100rpx;
	font-size: 30rpx;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>